.pos-abs {
	position: absolute !important;
	&.pos-top {
		top: 0px;
	}
	&.pos-right {
		right: 0px;
	}
	&.pos-bottom {
		bottom: 0px;
	}
	&.pos-left {
		left: 0px;
	}
}

/* 外边距 */
.margin-h {
	margin: 0 @marginH;
}
.margin-v {
	margin: @marginV 0;
}
.margin-vh {
	margin: @marginV @marginH;
}
.margin-l {
	margin-left: @marginH;
}
.margin-r {
	margin-right: @marginH;
}
.margin-t {
	margin-top: @marginV;
}
.margin-b {
	margin-bottom: @marginV;
}

/* 内边距 */
.padding-h {
	padding: 0 @marginH;
}
.padding-v {
	padding: @marginV 0;
}
.padding-vh {
	padding: @marginV @marginH;
}
.padding-l {
	padding-left: @marginH;
}
.padding-r {
	padding-right: @marginH;
}
.padding-t {
	padding-top: @marginV;
}
.padding-b {
	padding-bottom: @marginV;
}


/* 外边距(大) */
.margin-vh-lg {
	margin: @marginV_lg @marginH_lg;
}
.margin-h-lg {
	margin-left: @marginH_lg;
	margin-right: @marginH_lg;
}
.margin-v-lg {
	margin-top: @marginV_lg;
	margin-bottom: @marginV_lg;
}
.margin-l-lg {
	margin-left: @marginH_lg;
}
.margin-r-lg {
	margin-right: @marginH_lg;
}

/* 内边距(大) */
.padding-vh-lg {
	padding: @marginV_lg @marginH_lg;
}
.padding-h-lg {
	padding-left: @marginH_lg;
	padding-right: @marginH_lg;
}
.padding-v-lg {
	padding-top: @marginV_lg;
	padding-bottom: @marginV_lg;
}
.padding-l-lg {
	padding-left: @marginH_lg;
}
.padding-r-lg {
	padding-right: @marginH_lg;
}

/* 外边距(小) */
.margin-vh-sm {
	margin: @marginV_sm @marginH_sm;
}
.margin-h-sm {
	margin-left: @marginH_sm;
	margin-right: @marginH_sm;
}
.margin-v-sm {
	margin-top: @marginV_sm;
	margin-bottom: @marginV_sm;
}
.margin-l-sm {
	margin-left: @marginH_sm;
}
.margin-r-sm {
	margin-right: @marginH_sm;
}
.margin-t-sm {
	margin-top: @marginH_sm;
}
.margin-b-sm {
	margin-bottom: @marginH_sm;
}

/* 内边距(小) */
.padding-h-sm {
	padding-left: @marginH_sm;
	padding-right: @marginH_sm;
}
.padding-v-sm {
	padding-top: @marginV_sm;
	padding-bottom: @marginV_sm;
}
.padding-vh-sm {
	padding: @marginV_sm @marginH_sm;
}
.padding-l-sm {
	padding-left: @marginH_sm;
}
.padding-r-sm {
	padding-right: @marginH_sm;
}
.padding-t-sm {
	margin-top: @marginH_sm;
}
.padding-b-sm {
	margin-bottom: @marginH_sm;
}

// 全屏 方案1
.full-size {
	width: 100%;
	height: 100%;
}
// 全屏 方案2
.full-abs {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
// 全屏 方案3
.full-fixed {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

// flex 布局
.flex-wrap {
	display: flex;
}
.flex-wrap-v {
	display: flex;
	flex-direction: column;
}
// 上下左右居中
.flex-wrap-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.flex-flow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	& > .button {
		margin: 5px;
	}
}

// 循环flex-1 ...
.flex-loop(@counter) when (@counter > 0) {
	.flex-loop((@counter - 1)); // 递归调用自身
	.flex-@{counter} {
		position: relative;
		flex: @counter; // 每次调用时产生的样式代码
	}
}
.flex-loop(60);

.align-center {
	align-items: center;
}
.align-start {
	align-items: flex-start;
}
.align-end {
	align-items: flex-end;
}
.justify-center {
	justify-content: center;
}
.justify-start {
	justify-content: flex-start;
}
.justify-end {
	justify-content: flex-end;
}
.justify-between {
	justify-content: space-between;
}
.justify-around {
	justify-content: space-around;
}
.justify-evenly {
	justify-content: space-evenly;
}

// 九宫格
.grid-col-2,
.grid-col-3,
.grid-col-4,
.grid-col-5 {
	position: relative;
	overflow: hidden;
	text-align: center;

	.item {
		.boxLine(0 1px 1px 0);
		&:before {
			transform: scale(0.5, 0.5); // 处理border兼容问题 0.495, 0.5
		}
		display: block;
		position: relative;
		float: left;
		padding: 10px 0px;
		box-sizing: border-box;
		color: @gridColTxtColor;
		&.hover {
			color: @gridColTxtColorHover;
		}
		.item-icon {
			.flex-wrap-center;
			width: 40px;
			height: 40px;
			margin: 0 auto;
			font-size: 30px;
			img {
				width: 75%;
				height: 75%;
			}
		}

		.item-label {
			.txt-line1;
			text-align: center;
			font-size: @l4;
		}
	}

	&.no-line {
		&:before,
		.item:before {
			border: none;
		}
	}
}
.grid-col-2 {
	.item:nth-child(2n):before {
		border-right-width: 0;
	}
	.item {
		width: 50%;
	}
}
.grid-col-3 {
	.item:nth-child(3n):before {
		border-right-width: 0;
	}
	.item {
		width: 33.33333333%;
	}
}
.grid-col-4 {
	.item:nth-child(4n):before {
		border-right-width: 0;
	}
	.item {
		width: 25%;
	}
}
.grid-col-5 {
	.item:nth-child(5n):before {
		border-right-width: 0;
	}
	.item {
		width: 20%;
	}
}

// 滚动文字
.dwz-marquee-txt,
.dwz-marquee-list {
	overflow: hidden;
}

// 适配横竖屏布局
.layout-row {
	display: flex;
	flex-direction: column;

	.col-1,
	.col-2,
	.col-3,
	.col-4,
	.col-5,
	.col-6,
	.col-7,
	.col-8,
	.col-9,
	.col-10,
	.col-11,
	.col-12 {
		position: relative;
	}
}

// flex 流式布局，根据item宽度适配
.flex-flow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	&.is-left {
		justify-content: flex-start;
	}

	.col-1,
	.col-2,
	.col-3,
	.col-4,
	.col-5,
	.col-6,
	.col-7,
	.col-8,
	.col-9,
	.col-10,
	.col-11,
	.col-12 {
		position: relative;
		flex-shrink: 0;
		display: flex;

		.item-pic {
			max-height: 120px;
			margin: 4px 4px;
		}
	}

	.col-12,
	.col-11 {
		width: 100%;
	}
	.col-10,
	.col-9 {
		width: 83.33333333%;
	}
	.col-8,
	.col-7 {
		width: 66.66666667%;
	}
	.col-6,
	.col-5 {
		width: 50%;
	}
	.col-4,
	.col-3 {
		width: 33.33333333%;
	}
	.col-2,
	.col-1 {
		width: 16.66666667%;
	}
}

// 行列布局
.row {
	.flex-wrap;
	width: 100%;
	.col {
		display: block;
		.flex-1;
	}
	.col-1 {
		width: 20%;
	}
	.col-2 {
		width: 40%;
	}
	.col-3 {
		width: 60%;
	}
	.col-4 {
		width: 80%;
	}
	.col-5 {
		width: 100%;
	}
}

// 滚动表格
ul.grid {
	.tr {
		color: @descColor;
		font-size: @l4;
		.flex-wrap;

		.td {
			line-height: 30px;
			.flex-wrap;

			&.is-right {
				justify-content: flex-end;
			}
			&.is-center {
				justify-content: center;
			}
			&.w30 {
				width: 30px;
			}
			&.w40 {
				width: 40px;
			}
			&.w60 {
				width: 60px;
			}
			&.w80 {
				width: 80px;
			}
			&.w100 {
				width: 100px;
			}
			&.w120 {
				width: 120px;
			}
		}
	}
}
